<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人信息管理</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;


      background: url(../../static/loginBack.jpg) no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
    }

    .layui-form{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 10%;

    }

    .container{
      width: 420px;
      height: 380px;
      min-height: 380px;
      max-height: 500px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      padding: 20px;
      z-index: 130;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
      font-size: 16px;

    }

    .layui-input{
      border-radius: 5px;
      width: 300px;
      height: 40px;
      font-size: 15px;
    }

    .layui-form-item{
      margin-left: -20px;
    }


    #updateBtn{
      margin-left: -50px;
      border-radius: 5px;
      width: 350px;
      height: 40px;
      font-size: 15px;
    }

    a:hover{
      text-decoration: underline;
    }


  </style>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>  <!--引入jquery -->
  <script src="../../static/timeSleep.js"></script>
  <link rel="stylesheet" href="../../static/layui/css/layui.css">
  <script type="text/javascript">
    let userEmail;

    $(document).ready(function () {
      //管理加载
      $.ajax({
        async: true,
        url: "[[@{/user/isLogin}]]",
        type: "post",
        success: function (data) {
        if(data.code=="0"){
          alert(data.msg);
          window.location.href="/user/loginPage";
        }
        else {
          userEmail=data.data.email;
        }
        }
      });
      return false;
    });


    $(function(){
      //给浏览器窗口添加键盘按下事件
      $(window).keydown(function (e){
        //如果按的是回车键，则提交更新请求
        if(e.keyCode == 13){
          $("#updateBtn").click();

        }
      });

      //添加单击事件
      $("#updateBtn").click(function(){
        //获取请求参数
        var updateNickname = $.trim($("#updateNickname").val());
        var updatePassword = $.trim($("#updatePassword").val());
        var confirmPassword = $.trim($("#confirmPassword").val());
        let emailCode = document.getElementById("emailCode").value;
        //表单验证

        //验证用户密码：必须由字母或数字或下划线组成，并且长度为6-12位
        var passwordPatt = /^\w{6,12}$/;
        if(!passwordPatt.test(updatePassword)){
          alert("密码不合法");
          return;
        }

        //验证确认密码：必须和密码相同
        if(confirmPassword != updatePassword){
          alert("密码不一致");
          return;
        }

        //发送请求
        $.ajax({
                  url:'[[@{/user/updata}]]',
                  data:{
                    nickname:updateNickname,
                    password:updatePassword,
                    code:emailCode,
                  },
                  type:'post',
                  dataType:'json',
                  success:function (data){
                    if(data.code=="1"){
                      //更新成功，跳转到登录页面
                      window.location.href="/user/loginPage";
                    }else{
                      //修改失败，不跳转（显示错误信息）
                      alert(data.msg);
                    }
                  }
                }
        );
        return false;
      });

    });

    function sendEmail(email){
      $.ajax({
        async: true,
        url: "[[@{/user/sendemail}]]",
        data:{
          email:email,   //与controller中的形参名相同
        },
        type:"POST",
        dataType:"JSON",
        success: function (data) {
          layer.msg(data.data);
          $('#sendCode').attr("disabled",true);
          $('#sendCode').attr("class","layui-btn layui-btn-disabled");


          sleep(60000).then(() => {
            // 这里写sleep之后需要去做的事情
            $('#sendCode').attr("disabled",false);
            $('#sendCode').attr("class","layui-btn");
          })

        }
      });
      return false;
    }

  </script>

</head>
<body>
<a class="layui-btn" href="/Movie/moviePage">返回首页</a>

<form class="layui-form" >
  <div class="container">
    <div class="layui-form-item">
      <label class="layui-form-label">昵 &nbsp;&nbsp;称</label>
      <div class="layui-input-block">
        <input type="text" name="nickname" id="updateNickname"required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
      </div>
    </div>


    <div class="layui-form-item">
      <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
      <div class="layui-input-inline">
        <input type="password" name="password" id="updatePassword" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">确认密码</label>
      <div class="layui-input-inline">
        <input type="password" name="confirmPassword" id="confirmPassword" required lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
      <div class="layui-inline">
        <input id="emailCode" style="width: 90px" class="layui-input" name="code" placeholder="验证码" autocomplete="off"
               lay-verType="tips" lay-verify="required" required/>
      </div>
      <div class="layui-inline">
        <button id="sendCode" onclick="sendEmail(userEmail)" class="layui-btn layui-btn-normal" style="width: 100px" type="button">获取验证码</button>
      </div>

    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="register" name="update" id="updateBtn">
          更新
        </button>
      </div>
    </div>


  </div>
</form>

<!-- body 末尾处引入 layui -->
<script src="../../static/layui/layui.js"></script>
</body>
</html>